<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.layout{
				padding: 10px;
			}
			.layout .row{
				margin-bottom: 30px;
			}
			.row img{
				width: 100%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: skyblue;">
			<h1 class="mui-title" style="color: #fff;">标题</h1>
		</header>
		
		<div class="mui-content">
			<div class="layout">

			</div>
		</div>
		
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-phone"></span>
				<span class="mui-tab-label">电话</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">邮件</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
		
		<script src="js/mui.js"></script>
		<script src="libs/request.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function () {
			    // main()
			})
			main()
			
			function main () {
				list ()
			}
			
			function list () {
				get(Api.index.petShow,{size:10}).then(res=>{
					let s = ''
					let data = res.data
					mui.each(data,function (index,element) {
						s+=`<div class="row" id="${element._id}">
							<img src="${element.url}" alt="" />
						</div>`
					})
					document.querySelector('.layout').innerHTML=s
				})
			}
		</script>
	</body>

</html>